<template>
  <view class="main">
    <!-- header -->
    <view class="header_nav">
      <view class="header_left">
        <image src="../../../static/nft_search.png"></image>
        <text>我的关注</text>
        <text style="margin-left: 20rpx;">{{ total }}</text>
      </view>
      <view class="header_right" @click="showSort">
        <image src="../../../static/time.png"></image>
        <text>时间</text>
      </view>
    </view>
    <view class="content" style="height: 100%;">
      <view class="content_list">
        <!-- <view class="content_notice" v-show="isFollows" style="color: azure;">
          您还没有获得藏品........
        </view> -->
        <scroll-view
          @scrolltolower="() => updataList()"
          :scroll-y="true"
          class="content-scroll"
        >
          <view
            class="follow_list"
            v-for="(res, index) in myFollows"
            :key="index"
            @click="jumps(res)"
          >
            <!-- @click="jump(`/pages/details/series_detail?id=${res.activity_id}`)" -->
            <view class="follow_box">
              <!-- 预告内容 -->
              <view class="follow_content">
                <view class="follow_img">
                  <image :src="res.cover"></image>
                </view>
                <view class="follow_text">
                  <!-- 活动名 -->
                  <view class="content_title">{{ res.activity_name }}</view>
                  <!-- 活动数量，发行方式 -->
                  <view class="content_countBox">
                    <!-- 活动下藏品数量 -->
                    <view class="count">
                      <!-- 图标 -->
                      <image src="../../../static/count_icon.png"></image>
                      <!-- 总份数 -->
                      <view class="total">
                        限量{{
                          res.show_number
                            ? res.show_number
                            : res.total_show_number
                        }}份
                      </view>
                      <!-- 共几款 -->
                      <view class="models">共{{ res.total_collect }}款</view>
                    </view>
                    <!-- 活动发行类型（字的长度可能不同） -->
                  </view>
                  <view class="types">{{ res.flag }}</view>
                  <!-- 发行商 -->
                  <view class="content_host">
                    <view class="host_logo">
                      <image :src="res.brand_info.icon_image"></image>
                    </view>
                    <text>{{ res.brand_info.name }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="content_notice">
            <view class="line"></view>
            <view class="other-font">
              {{(myFollows.length == 0 ? '您没有关注的活动，请前往首页查看' : '没有更多了' )}}
            </view>
            <view class="line"></view>
          </view>
        </scroll-view>
      </view>
    </view>
    <SortPopup ref="sort" @change="changeSort" />
  </view>
</template>

<script>
import SortPopup from '../../../common/SortPopup/SortPopup.vue'
import jWeixin from '@/node_modules/jweixin-module/lib/index.js'
import api from '@/request/api.js'
import log from '@/common/login.js'
export default {
  data() {
    return {
      statusBarHeight: 0,
      titleBarHeight: 0,
      screenHeight: 0,
      selectSort: 1, // 当前选择的排序
      token: '',
      page: 1,
      myFollows: [],
      userInfo: {}, // 用户信息
      total: '',
      isCollections: false,
      ua: '',
      launch: false,
    }
  },
  mounted() {
    this.launch = true
    const url = location.href
    this.configSDK(url, {
      title: '卯时数字 - 进入我的',
      desc: '打造个人数字资产专属空间',
      link: 'https://h5.onedaen.com/pages/mine/mine',
      imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
    })
    if (!this.ua) return
    document.getElementsByClassName('uni-page-head__title')[0].style.display =
      'none'
  },
  onRechBottom() {
    this.updataList()
  },
  onShow() {
    if (!this.launch) return
    const url = location.href
    this.configSDK(url, {
      title: '卯时数字 - 进入我的',
      desc: '打造个人数字资产专属空间',
      link: 'https://h5.onedaen.com/pages/mine/mine',
      imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
    })
  },
  onPullDownRefresh() {
    this.updataList('reset')
  },
  /* 我的藏品页面默认返回到首页 */
  onUnload() {
    // uni.reLaunch({
    //   url: 'mine',
    // })
  },
  onLoad() {
    const ua = window.navigator.userAgent.toLowerCase()
    this.ua = ua.match(/MicroMessenger/i) == 'micromessenger'
    uni.getSystemInfo({
      success: (res) => {
        this.screenHeight = res.screenHeight * (750 / res.windowWidth) //将px 转换rpx
      },
    })
    let userInfo = uni.getStorageSync('userInfo')
    let token = userInfo.token
    let uid = userInfo.uid
    this.userInfo = userInfo
    // 加载我的藏品需判断用户是否登录
    if (token == '') {
      /* 提示用户需要登录操作 */
      uni.showModal({
        title: '提示',
        content: '请先登录再进行操作',
        success: (res) => {
          if (res.confirm) {
            uni.redirectTo({
              url: 'mine',
            })
          } else if (res.cancel) {
            this.getCollectionList(token, uid)
          }
        },
      })
    } else {
      this.getCollectionList(token, uid)
    }
  },
  methods: {
    /* 我的藏品详情 */
    myCollectionsDetail(id) {
      uni.navigateTo({
        url: 'My_collection_detail?id=' + id,
      })
    },
    async configSDK(url, { title, desc, link, imgUrl }) {
      // const url = `https://h5.onedaen.com/pages/details/series_detail?id=${this.id}`

      const upUrl = encodeURIComponent(url)
      api.shareData({ url: upUrl }).then((res) => {
        jWeixin.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的 JS 接口列表
        })

        jWeixin.ready(() => {
          // 分享给朋友
          jWeixin.updateAppMessageShareData({
            title, // 分享标题
            // desc: this.activity_detail.description, // 分享描述
            desc,
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              // 设置成功
              console.log('设置成功')
            },
          })
          // 分享到朋友圈
          jWeixin.updateTimelineShareData({
            title, // 分享标题
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              console.log('设置成功')
              // 设置成功
            },
          })
        })
      })
    },
    getCollectionList(token, uid) {
      api
        .myFollow({
          uid: uid, //用户唯一id
          page: this.page,
          token: token,
        })
        .then((res) => {
          console.log(res)
          if (!res.data.data.length == 0 && this.page == 1) {
            this.myFollows = res.data.data
          } else if (!res.data.data.length == 0 && this.page > 1) {
            let more = res.data.data
            for (let i = 0; i < more.length; i++) {
              this.myFollows.push(more[i])
            }
          }
          this.total = res.data.total
        })
    },
    // 显示时间排序
    showSort() {
      this.$refs.sort.showSort()
    },
    // 切换排序
    changeSort(item) {
      this.selectSort = item.value
      this.updataList('sort')
    },
    // 跳转
    jump(url) {
      uni.navigateTo({
        url,
      })
    },
    // 跳转到详情
    jumps(item) {
      if (item.total_collect == 1) {
        uni.navigateTo({
          url: `/pages/details/collection_detail?activity_id=${item.activity_id}&collection_id=${item.collect_id}`,
        })
      } else {
        uni.navigateTo({
          url: `/pages/details/series_detail?id=${item.activity_id}`,
        })
      }
    },
    // 刷新列表
    async updataList(reset) {
      if (this.myFollows.length < this.page * 10 && !reset) {
        uni.stopPullDownRefresh()
        return
      }
      if (!reset) {
        this.page++
      } else if (reset == 'reset') {
        this.page = 1
      }

      const data = {
        page: this.page,
        sort_type: this.selectSort,
      }
      try {
        const list = await api.myFollow(data)
        this.myFollows = reset
          ? list.data.data
          : this.myFollows.concat(list.data.data)
        this.total = list.data.total
        if (this.myFollows.length == 0) {
          this.isCollections = true
        }
        uni.stopPullDownRefresh()
      } catch (error) {
        uni.stopPullDownRefresh()
      }
    },
  },
  components: {
    SortPopup,
  },
}
</script>

<style lang="scss" scoped>
// page {
//   background-color: #181816;
//   height: 100%;
// }
.main {
  background-color: #181816;
  min-height: 100vh;
  overflow: hidden;
}
.header_nav {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .header_left {
    min-width: 180rpx;
    max-width: 220rpx;
    display: flex;
    height: 60rpx;
    line-height: 60rpx;
    padding-right: 27rpx;
    font-size: 26rpx;
    color: #4effff;
    background-color: rgba(128, 128, 128, 0.15);
    border-radius: 0rpx 28rpx 28rpx 0rpx;

    image {
      margin: 15rpx;
      width: 30rpx;
      height: 30rpx;
    }
  }

  .header_right {
    display: flex;
    margin-right: 20rpx;
    color: #999999;
    line-height: 60rpx;
    font-size: 26rpx;

    image {
      width: 36rpx;
      height: 36rpx;
      margin: 12rpx;
    }
  }
}
.content-scroll {
  height: calc(100vh - 60rpx);
  box-sizing: border-box;
  padding: 40rpx 0;

  .follow_list {
    // padding: 25rpx 0;
    width: 685rpx;
    margin: 20rpx auto;
    .follow_box {
      position: relative;
      width: 100%;
      // height: 310rpx;
      background-color: #282a2c;
      border-radius: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;
      // margin: auto;
      /* 渐变效果 */
      // background: transparent;
      // background-clip: padding-box, border-box;
      // background-origin: padding-box, border-box;
      // background-image: linear-gradient(135deg, #000, #000), linear-gradient(to left, #000, #4effff, #000, );
      // border-top: 1px transparent solid;

      .follow_time {
        position: absolute;
        top: -20rpx;
        left: 30%;
        height: 40rpx;
        width: 40%;
        margin: auto;
        text-align: center;
        color: #4effff;
        font-size: 24rpx;
        line-height: 40rpx;
        /* 渐变效果 */
        background: transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(135deg, #000, #000),
          linear-gradient(135deg, #4effff, #4effff);
        border: 1px transparent solid;
      }

      .follow_content {
        display: flex;
        width: 100%;
        align-items: center;
        // margin: auto;

        .follow_img {
          width: 250rpx;
          height: 250rpx;
          // margin: 30rpx 0;
          min-width: 250rpx;
          border-radius: 20rpx;
          border: 0;

          image {
            width: 100%;
            height: 100%;
            border-radius: 20rpx;
          }
        }

        .follow_text {
          display: flex;
          flex-direction: column;

          margin-left: 18rpx;
          .content_title {
            width: calc(685rpx / 2);
            white-space: nowrap;
            font-family: PingFang-SC-Medium;
            line-height: 36rpx;
            font-size: 36rpx;
            letter-spacing: 0rpx;
            color: #ffffff;
            word-break: break-all;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            // line-height: 100%;
            height: 36rpx;
          }

          /* 发行数量 */
          .content_countBox {
            display: flex;
            font-size: 24rpx;
            height: 38rpx;
            margin: 20rpx 0;

            .count {
              display: flex;
              align-items: center;
              letter-spacing: 1rpx;
              background-color: #d3ae82;
              overflow: hidden;
              border-radius: 5rpx;
              border: 1rpx solid #d3ae82;
              box-sizing: border-box;
              height: 38rpx;
              image {
                margin: 6rpx 10rpx;
                width: 24rpx;
                height: 28rpx;
              }

              .total {
                text-align: center;
                margin-right: 7rpx;
                height: 35rpx;
                font-weight: bold;
                vertical-align: middle;
                display: flex;
                align-items: center;
              }

              .models {
                padding: 0 19rpx 0 10rpx;
                height: 35rpx;
                list-style: none;
                vertical-align: middle;
                display: flex;
                align-items: center;
                //   box-sizing: border-box;
                //   text-align: center;
                //   border-radius: 5rpx;
                //   margin-left: 10rpx;

                background-color: #181816;
                color: #d3ae82;
              }
            }
          }
          .types {
            padding: 0 12rpx;
            height: 34rpx;
            font-size: 24rpx;

            width: fit-content;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            text-align: center;
            background-image: linear-gradient(
                102deg,
                #d8a0d8 0%,
                #a4bbe5 41%,
                #cdffd7 100%
              ),
              linear-gradient(#181816, #181816);
            background-blend-mode: normal, normal;
            line-height: 38rpx;
            border-radius: 5rpx;
          }

          .content_host {
            display: flex;
            margin-top: 20rpx;
            .host_logo {
              width: 60rpx;
              height: 60rpx;
              border-radius: 30rpx;
              border: 0;

              image {
                width: 100%;
                height: 100%;
                border-radius: 30rpx;
                border: 0;
              }
            }

            text {
              font-family: PingFang-SC-Medium;
              font-size: 26rpx;
              line-height: 60rpx;
              margin-left: 10rpx;
              color: #ffffff;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
}
.content_notice {
  margin: 60rpx auto 0;
  height: 36px;
  line-height: 36px;
  align-items: center;
  justify-content: center;
  display: flex;
  .other-font {
    padding: 0 18rpx 0;
    color: #666666;
    font-size: 24rpx;
  }
  .line {
    height: 1.5rpx;
    width: 50rpx;
    // background: linear-gradient(to right, #181816, #4effff, #181816);
    background-image: linear-gradient(
      to right,
      rgba(245, 245, 245, 0),
      rgba(245, 245, 245, 0.6)
    );
    &:last-child {
      background-image: linear-gradient(
        to right,
        rgba(245, 245, 245, 0.6),
        rgba(245, 245, 245, 0)
      );
    }
  }
}
</style>
